<template>
  <div class="big-box" >
    <div class="wrapper">
      <section>
        <div
          @click="goDetails(item)"
          class="list-box"
          v-for="(item,index) in listArr"
          :key="index"
        >
          <div class="list-container">
            <div
              class="img-box"
              :style="`backgroundImage:url(${item.cover})`"
            ></div>
            <div class="text-box">
              <section class="list-title">
                {{item.title}}
              </section>
              <section class="time">
                {{item.c_number}}人已学
              </section>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import {
  LoadMore
} from 'vux'
import BScroll from 'better-scroll'
import collection from './co_Collection'
import noAssessment from '@/components/public/noassessment'
import {
  user_ke
} from '@/api/center'
import {
  search_popularity
} from '@/api/mycourse'
import {
  mapState
} from 'vuex'
export default {
  components: {
    collection,
    noAssessment,
    LoadMore
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id,
      openid: state => state.openid
    })
  },
  created () {
    this.getlist()
  },
  data () {
    return {
      customBarWidth: ' ',
      moreHtml: '查看更多',
      listArr: '',
      page: 1,
      pageshow: 10
    }
  },
  methods: {
    goDetails (item) {
      this.$router.push({
        path: '/coursedetails',
        query: {
          curriculumId: item.curriculum_id
        }
      })
    },
    getlist () {
      let obj = {
        user_id: this.user_id,
        type: 0,
        status: '1',
        page: this.page,
        pageshow: this.pageshow
      }
      user_ke(obj).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        if (res.data.code === 200 && res.data.data[0] !== undefined) {
          res.data.data.forEach(element => {
            element.update_time = this.getLocalTime(element.update_time)
          })
          if (this.page === 1) {
            this.listArr = res.data.data
            if (this.listArr.length > 0) {
              this.initwrapper()
            }
          } else {
            this.listArr = [...this.listArr, ...res.data.data]
          }
          this.page = this.page + 1
        } else {
        }
      })
    },
    initwrapper () {
      let wrapper = document.querySelector('.wrapper')
      this.scroll = new BScroll(wrapper, {
        click: true,
        scrollY: true,
        tap: true,
        probeType: 3,
        pullUpLoad: {
          threshold: -10
        }
      })
      this.scroll.on('pullingUp', () => {
        this.getlist()
        this.scroll.finishPullUp()
        this.scroll.refresh()
      })
    },
    getLocalTime (nS) {
      let time = new Date(nS * 1000)
      let y = time.getFullYear()
      var m = time.getMonth() + 1
      var d = time.getDate()
      return `${y}-${this.buzero(m)}-${this.buzero(d)}`
    },
    buzero (time) {
      if (time < 9) {
        return `0${time}`
      } else {
        return time
      }
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  overflow: hidden;
  height: calc(100vh);
}
.none {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  div {
    width: 100%;
    height: 60%;
    padding-top: 20%;
  }
}
.recommend-box {
  width: calc(100% - 20 * 2px);
  margin: 0 auto;
}
.list-box {
  display: flex;
  margin: calc(100vw * 60 / 750) 5%;
  height: calc(100vw * 145 / 750);
  overflow: hidden;
  box-sizing: border-box;
  .list-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .img-box {
      width: calc(100vw * 264 / 750);
      height: calc(100vw * 145 / 750);
      background-color: #fff100;
      border-radius: 5px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      margin-right: calc(100vw * 14 / 750);
    }
    .text-box {
      flex: 1;
      height: calc(100vw * 145 / 750);
      position: relative;
      font-family: PingFang-SC-Medium;
      .list-title {
        width: 100%;
        font-size: calc(100vw * 30 / 750);
        color: #333;
        text-overflow: ellipsis;
        display: -webkit-box;
        /* -webkit-box-orient: vertical; */
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .time {
        position: absolute;
        bottom: 1px;
        width: 130px;
        height: 17px;
        font-size: 11px;
        color: #999999;
      }
    }
  }
}
.look-mores {
  font-family: PingFangSC-Regular;
  font-size: 15px;
  color: #f39800;
  letter-spacing: 0.48px;
  text-align: center;
  width: 100%;
  text-align: center;
  margin-top: calc(100vw * 30 / 750);
}
.guess-link {
  width: calc(100% - 20 * 2px);
  margin: calc(100vw * 60 / 750) auto calc(100vw * 50 / 750) auto;
  font-family: PingFangSC-Semibold;
  font-size: calc(100vw * 36 / 750);
  color: #333333;
  letter-spacing: 0.61px;
  text-align: left;
}
</style>
